<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="success"
        @click="noPay"
      >待支付</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="success"
        @click="noSend"
      >待发货</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="success"
        @click="noGet"
      >待收货</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="success"
        @click="already"
      >已完成</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-search"
        @click="all"
      >全部订单</el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        label="ID"
        prop="_id"
        sortable="custom"
        align="center"
        width="80"
      >
        <template slot-scope="{row}">
          <span>{{ row._id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品名" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="Status" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.status">{{ row.status=="1"?"上架":"下架" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="Actions"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
          <el-button
            v-if="row.status!='1'"
            size="mini"
            type="success"
            @click="handleModifyStatus(row,'1')"
          >上架</el-button>
          <el-button v-if="row.status!='0'" size="mini" @click="handleModifyStatus(row,'0')">下架</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row,$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <!-- 新增或更新弹出层 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
      >
        <!-- prop对于rules中的验证规则 -->
        <el-form-item label="商品名">
          <el-input v-model="temp.name" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import {getOrder} from '@/api/order'
export default {
  data() {

    return {
      tableKey: 0,
      list: null, //列表数据
      total: 0, //列表总数
      listLoading: false, //列表是否正在加载
      listQuery: {
        //列表查询条件
        page: 1, //当前页
        limit: 20, //每页条数
        status:undefined,
        sort: 1
      },
      statusOptions: [0, 1], //状态值 0下架，1 在售
      temp: {
        id: undefined,
        // importance: 1,//重要级
        name: ""
      },
      dialogFormVisible: false, //增加商品form表单弹窗的显示或隐藏
      dialogStatus: "", //用于判断增加商品按钮显示是增加还是更新
      textMap: {
        // 弹出层的标题
        update: "修改订单",
        create: "增加订单"
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表数据
    async getList() {},
    handleCreate(){},
    handleUpdate(){},
    handleModifyStatus(){},
    handleDelete(){},
    createData(){},
    updateData(){},

    //获取待支付的订单
    async noPay(){
        console.log("noPay");//status: 0
        this.listQuery.status = 0;
        const res = await getOrder(this.listQuery)
        console.log(res);
    },
    //获取待发货的订单
    async noSend(){
        console.log("noSend");//status: 1
        this.listQuery.status = 1;
        const res = await getOrder(this.listQuery)
        console.log(res);
    },
    //获取待收获的订单
    async noGet(){
        console.log("noGet");//status: 2
        this.listQuery.status = 2;
        const res = await getOrder(this.listQuery)
        console.log(res);
    },
    //获取已完成的订单
    async already(){
        console.log("already");//status: 3
        this.listQuery.status = 3;
        const res = await getOrder(this.listQuery)
        console.log(res);
    },
    //获取所有的订单
    async all(){
        console.log("all");
        const res = await getOrder(this.listQuery)
        console.log(res);
    },
  },
  components:{
      Pagination
  }
};
</script>
